import React, { Component, PropTypes } from 'react'

class Digit extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.value !== this.props.value
  }

  render() {
    const digitStyle = {
      display:'inline-block',
      fontSize: 20,
      padding: 10,
      margin: 5,
      backgroundColor: '#eeeeee',
    }
    let displayValue = this.props.value
    if (this.props.value < 10) {
      displayValue = `0 ${this.props.value}`
    }
    return (
      <div style={digitStyle}>{displayValue}</div>
    )
  }
}

Digit.propTypes = {
  value: PropTypes.number.isRequired,
}

export default Digit